import React, { useState } from 'react';
import { Card, Form, Input, Button, message, Tabs, Select, Switch, Upload, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Typography } from 'antd';

const { Text } = Typography;
const { Option } = Select;
const { TextArea } = Input;

const Settings: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('1');
  const [avatarUrl, setAvatarUrl] = useState<string>('');

  const onFinish = (values: any) => {
    setLoading(true);
    console.log('Received values of form: ', values);
    // 模拟API调用
    setTimeout(() => {
      setLoading(false);
      message.success('设置已保存');
    }, 1000);
  };

  const handleTabChange = (key: string) => {
    setActiveTab(key);
  };

  const handleAvatarChange = (info: any) => {
    if (info.file.status === 'done') {
      // 这里应该是上传成功后的处理
      const reader = new FileReader();
      reader.readAsDataURL(info.file.originFileObj);
      reader.onload = () => {
        setAvatarUrl(reader.result as string);
      };
    }
  };

  const tabItems = [
    {
      key: '1',
      label: '基本设置',
      children: (
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          initialValues={{
            nickname: '用户名',
            email: 'user@example.com',
            bio: '这个人很懒，什么都没有留下',
            country: 'china',
            province: 'zhejiang',
            city: 'hangzhou',
          }}
          style={{ maxWidth: 600 }}
        >
          <Form.Item label="头像" name="avatar">
            <Upload
              name="avatar"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              onChange={handleAvatarChange}
              beforeUpload={() => false}
            >
              {avatarUrl ? (
                <Avatar size={100} src={avatarUrl} />
              ) : (
                <div>
                  <UserOutlined style={{ fontSize: 32 }} />
                  <div style={{ marginTop: 8 }}>点击上传</div>
                </div>
              )}
            </Upload>
          </Form.Item>

          <Form.Item
            label="昵称"
            name="nickname"
            rules={[{ required: true, message: '请输入昵称!' }]}
          >
            <Input placeholder="请输入昵称" />
          </Form.Item>

          <Form.Item
            label="个人简介"
            name="bio"
          >
            <TextArea rows={4} placeholder="请输入个人简介" />
          </Form.Item>

          <Form.Item
            label="国家/地区"
            name="country"
            rules={[{ required: true }]}
          >
            <Select placeholder="请选择国家/地区">
              <Option value="china">中国</Option>
              <Option value="usa">美国</Option>
              <Option value="japan">日本</Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="所在省市"
            name="province"
            rules={[{ required: true }]}
          >
            <Select placeholder="请选择省份">
              <Option value="zhejiang">浙江省</Option>
              <Option value="jiangsu">江苏省</Option>
              <Option value="guangdong">广东省</Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="所在城市"
            name="city"
            rules={[{ required: true }]}
          >
            <Select placeholder="请选择城市">
              <Option value="hangzhou">杭州市</Option>
              <Option value="nanjing">南京市</Option>
              <Option value="guangzhou">广州市</Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="联系电话"
            name="phone"
          >
            <Input placeholder="请输入联系电话" />
          </Form.Item>

          <Form.Item
            label="个人网站"
            name="website"
          >
            <Input placeholder="请输入个人网站" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              更新基本信息
            </Button>
          </Form.Item>
        </Form>
      ),
    },
    {
      key: '2',
      label: '安全设置',
      children: (
        <Form layout="vertical" style={{ maxWidth: 600 }}>
          <Form.Item label="账户密码">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>当前密码强度：<Text type="danger">弱</Text></Text>
              <Button type="link">修改</Button>
            </div>
          </Form.Item>

          <Form.Item label="密保手机">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>已绑定手机：138****1234</Text>
              <Button type="link">修改</Button>
            </div>
          </Form.Item>

          <Form.Item label="密保问题">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>未设置密保问题，密保问题可有效保护账户安全</Text>
              <Button type="link">设置</Button>
            </div>
          </Form.Item>

          <Form.Item label="备用邮箱">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>已绑定邮箱：ant***sign.com</Text>
              <Button type="link">修改</Button>
            </div>
          </Form.Item>
        </Form>
      ),
    },
    {
      key: '3',
      label: '通知设置',
      children: (
        <Form layout="vertical" style={{ maxWidth: 600 }}>
          <Form.Item label="系统消息" name="systemMessage">
            <Switch defaultChecked />
            <Text type="secondary" style={{ marginLeft: 8 }}>系统消息将以站内信的形式通知</Text>
          </Form.Item>

          <Form.Item label="账户消息" name="accountMessage">
            <Switch defaultChecked />
            <Text type="secondary" style={{ marginLeft: 8 }}>账户消息将以站内信的形式通知</Text>
          </Form.Item>

          <Form.Item label="待办任务" name="todoMessage">
            <Switch defaultChecked />
            <Text type="secondary" style={{ marginLeft: 8 }}>待办任务将以站内信的形式通知</Text>
          </Form.Item>

          <Form.Item label="邮件提醒" name="emailMessage">
            <Switch />
            <Text type="secondary" style={{ marginLeft: 8 }}>邮件提醒将以邮件的形式通知</Text>
          </Form.Item>

          <Form.Item>
            <Button type="primary">保存设置</Button>
          </Form.Item>
        </Form>
      ),
    },
  ];

  return (
    <div className="account-settings">
      <Card>
        <Tabs activeKey={activeTab} onChange={handleTabChange} items={tabItems} />
      </Card>
    </div>
  );
};

export default Settings;
